<template>
  <div class="page-class">
    <Breadcrumb>
      <a-button type="primary" @click="showStall"
        >查看车位</a-button
      ></Breadcrumb
    >
    <div class="cnt-class">
      <div class="query">
        <a-row>
          <a-col :span="6">
            <a-input-search
              v-model.trim="userName"
              :maxLength="50"
              allowClear
              placeholder="请输入车牌号"
              @search="onSearch"
            >
              <a-button slot="enterButton" type="primary"> 搜索 </a-button>
            </a-input-search>
          </a-col>
        </a-row>
        <div class="card">
          <div class="card-item">
            <span class="label">车位总数</span>
            <span class="number">122</span>
          </div>
          <div class="card-item">
            <span class="label">占位数</span>
            <span class="number">100</span>
          </div>
          <div class="card-item">
            <span class="label">空余数</span>
            <span class="number">22</span>
          </div>
          <div class="card-item">
            <span class="label">小区车辆</span>
            <span class="number">80</span>
          </div>
          <div class="card-item">
            <span class="label">外部车辆</span>
            <span class="number">55</span>
          </div>
        </div>
        <!-- 筛选列表 -->
        <Collapse :opend="opend" @changOpend="changOpend">
          <a-row>
            <a-col :span="24">
              <span class="collapse-label">出入场时间：</span>
              <a-range-picker
                :value="query.date"
                :getCalendarContainer="getCalendarContainer"
                valueFormat="YYYY-MM-DD"
                @change="onChange"
              />
              <span class="pwd-tip"
                >查询单日，开始日期和结束日期请选择同一天</span
              >
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <span class="collapse-label">类型：</span>
              <a-radio-group v-model="query.type">
                <a-radio
                  v-for="(node, index) in typeList"
                  :value="node.value"
                  :key="index"
                >
                  {{ node.name }}
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-button type="primary" @click="getList(2)">查询</a-button>
              <a-button type="default" @click="handleRest">重置</a-button>
            </a-col>
          </a-row>
        </Collapse>
      </div>
      <div class="table">
        <BaseTable
          ref="table"
          rowKey="id"
          :scroll="{ y: y }"
          :loading="loading"
          :columns="columns"
          :dataSource="list"
          :hideSelect="true"
          @change="getList"
        ></BaseTable>
      </div>
    </div>
    <!-- 查看车位 -->
    <Clipse
      :visible="visible"
      :image="image"
      :imgStyle="imgStyle"
      @close="visible = false"
    ></Clipse>
  </div>
</template>
<script>
import BaseTable from "@/components/BaseTable";
import Collapse from "@/components/Collapse";
import Clipse from "@/components/ClipseImg/Clipse.vue";
import httpApi from "@/api/log";
import stall from "@/assets/stall.png";

export default {
  components: {
    BaseTable,
    Collapse,
    Clipse
  },
  data() {
    return {
      loading: false,
      opend: true,
      visible: false,
      image: "",
      query: {
        type: undefined,
        date: null
      },
      imgStyle: {
        width: "700px",
        height: "600px"
      },
      typeList: [
        {
          name: "全部",
          value: undefined
        },
        {
          name: "小区车辆",
          value: 1
        },
        {
          name: "外部车辆",
          value: 2
        }
      ],
      time: -1,
      userName: undefined,
      list: [],
      columns: [
        {
          title: "车牌号",
          dataIndex: "userNo",
          ellipsis: true
        },
        {
          title: "类型",
          dataIndex: "type",
          ellipsis: true
        },
        {
          title: "入场时间",
          dataIndex: "createTime",
          ellipsis: true
        },
        {
          title: "出场时间",
          dataIndex: "createTime",
          ellipsis: true
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    y() {
      return this.opend ? 250 : 390;
    }
  },
  methods: {
    getCalendarContainer() {
      return document.body;
    },
    onChange(value) {
      this.query.date = value;
    },
    showStall() {
      //查看车位
      this.visible = true;
      this.image = stall;
    },
    changOpend(opend) {
      this.opend = opend;
    },
    handleRest() {
      // 重置
      this.query = {
        type: undefined,
        date: null
      };
    },
    onSearch() {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.getList(1);
      }, 600);
    },
    getList(current) {
      this.loading = true;
      if (current === 1) {
        this.$refs.table.pageInfo.current = 1;
      }
      httpApi
        .getList({
          userName: this.userName,
          pageNo: this.$refs.table.pageInfo.current,
          pageSize: this.$refs.table.pageInfo.pageSize
        })
        .then((res) => {
          if (res.retcode === 0) {
            this.list = res.data.records || [];
            if (this.$refs.table) {
              this.$refs.table.pageInfo.total = res.data.total;
            }
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.card {
  width: 70%;
  display: flex;
  align-items: center;
  margin-top: 24px;
  padding: 0 16px;

  .card-item {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    .label {
      .font-Medium(14px,rgba(0, 0, 0, 1),30px,400);
    }
    .number {
      .font-Medium(18px,rgba(0, 0, 0, 1),32px,bolder);
    }
  }
}

.pwd-tip {
  margin-left: 10px;
  display: inline-block;
  .font-Medium(14px,rgba(0, 0, 0, 0.45),18px,400);
}
</style>
